<template>
	<div class="accordion">
		<h2>手风琴</h2>
		<div class="fo-Gray mt10">手风琴组件的实例和实现思路代码</div>
		
		
		<h3 class="mt30">1、使用max-height 来操作</h3>
		<div class="fo-Gray">max-height 的值不宜过大，因为动画效果是线性的，所以超过元素本身高度的多余值越多，“收起”时造成视觉上的延迟越大。建议可以动态去计算下高度</div>
		<div class="mt10 noSel bg-SkyBlue fo-Green max-wid-per-30 txt-cen radi-6">
			<span class="block pad-10 cur-poi" @click="toggle">{{state.accordion_title}}</span>
			<div class="bg-AliceBlue ove-hid trans-Z-8" :style="{'max-height':state.accordion_show?'150px':'0px'}">
				<span class="block pad-10">我是隐藏的内容1</span>
				<span class="block pad-10">我是隐藏的内容2</span>
				<span class="block pad-10">我是隐藏的内容3</span>
			</div>
		</div>
		
		<h3 class="mt30">2、使用来操作</h3>
	</div>
</template>

<script>
	import {
		reactive,
	} from 'vue'
	export default {
		setup() {
			// 双向绑定数据
			const state = reactive({
				accordion_title:'点击我释放内容',
				accordion_show: false,
			})

			// 方法
			const methods = {
				toggle() {
					state.accordion_title =  state.accordion_show ? '点击我释放内容': '点击我隐藏内容'
					state.accordion_show = !state.accordion_show
				}
			}
			return {
				state,
				...methods
			}
		}
	}
</script>

<style>
</style>
